<template>
  <view class="product-list">
    <!-- 循环渲染商品列表 -->
    <search-list-item 
      v-for="(item, index) in productList" 
      :key="index" 
      :item="item" 
      :index="index" 
    />
  </view>
</template>

<script>
  // 引入渲染单个商品项的组件
  import searchListItem from "@/components/search-list-item/search-list-item.vue"; 

  export default {
    components: {
      searchListItem  // 使用商品项组件
    },
    props: {
      productList: {  // 接收父组件传递的商品列表
        type: Array,
        required: true
      }
    }
  };
</script>

<style scoped>
  /* 商品列表的样式 */
  .product-list {
    padding: 20px;
  }
</style>
